// components/ChatArea.tsx
import codemuseLogo from '@/assets/codemuseLogo.png';
import SenderChat from '@/components/SenderChat';
import { Input, Select, Typography } from 'antd';
import React from 'react';
import styles from './index.less';

const { Title, Paragraph } = Typography;
const { Option } = Select;
const { TextArea } = Input;

interface IProps {
  projectList: any[];
  dropDownList: any[];
  isExpanded: boolean; // 正在生成代码
  onChat: (params: any) => void;
  onProgramChange: (params: any) => void;
  onRequireChange: (params: any) => void;
}

const ChatArea: React.FC<IProps> = (props) => {
  const {
    projectList,
    dropDownList,
    isExpanded,
    onChat,
    onProgramChange,
    onRequireChange,
  } = props;
  return (
    <div className={styles.chatArea}>
      <div className={styles.header}>
        <div className={styles.titleBox}>
          <img src={codemuseLogo} className={styles.logo} />
          <Title level={2} className={styles.title}>
            我是CodeMuse，很高兴能帮助你
          </Title>
        </div>

        <Paragraph className={styles.subTitle}>
          利用先进的大模型技术，通过直观的对话界面，快速生成高质量且原厂设计稿与高可用的前端代码
        </Paragraph>
        <div className={styles.selectors}>
          <Select
            options={projectList}
            placeholder="请选择"
            fieldNames={{ label: 'name', value: 'id' }}
            style={{ width: 158, marginRight: 16 }}
            onChange={onProgramChange}
          />
          <Select
            options={dropDownList}
            placeholder="请选择"
            fieldNames={{ label: 'title', value: 'id' }}
            style={{ width: 158 }}
            onChange={onRequireChange}
          />
        </div>
      </div>
      <div className={styles.chatBox}>
        <SenderChat onChat={onChat} isExpanded={isExpanded} />
      </div>
    </div>
  );
};

export default ChatArea;
